// 使用 useIntersectionObserver 指令 实现图片懒加载
import { useIntersectionObserver } from '@vueuse/core';

// 定义懒加载插件
export const lazyPlugin = {
  install(app) {
    // 懒加载指令
    app.directive('img-lazy', {
      mounted(el, binding) {
        // 监听元素是否进入可视区域
        // 进入可视化区域，将图片地址赋值给 img 标签
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            el.src = binding.value;
            // 只在第一次的 时候监听  避免内存浪费
            stop()
          }
        })
      }
    })
  }
}
